<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            /*容器,一定要给容器加上宽高*/
            display: flex;
            width:600px;
            height:600px;
            background-color: darkred;
            /*水平垂直居中*/
            justify-content: center;/*水平*/
            align-items: center;/*垂直*/
        }
        .child{
            /*开启flex布局，不会出现盒子塌陷问题*/
           /* margin-top:50px;*/
            /*开启flex布局后行内元素可以设置大小（类似行内块元素）*/
            width:150px;
            height:150px;
            /*行内元素也可以设置外边距了，相对自己原来的位置*/
            margin-left: 10px;
            background-color: darkblue;
        }
    </style>
</head>
<body>
<div class="parent">
    <span class="child"></span>
</div>

</body>
</html>